<template>
  <div class="app-container">
    <div class="query">
      <el-input
        v-model="queryByID"
        placeholder="输入书籍编号"
        clearable
      />
      <el-input
        v-model="queryByID"
        placeholder="输入书籍名称"
        clearable
      />
      <el-input
        v-model="queryByID"
        placeholder="输入书籍类别"
        clearable
      />
      <el-button type="primary">搜索</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="编号" width="95">
        <template #default="scope">
          {{ scope.row.bookid }}
        </template>
      </el-table-column>
      <el-table-column label="书籍名称">
        <template #default="scope">
          {{ scope.row.bookname }}
        </template>
      </el-table-column>
      <el-table-column label="作者" width="230" align="center">
        <template #default="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>
      <el-table-column label="出售人昵称" width="190" align="center">
        <template #default="scope">
          <span>{{ scope.row.sell }}</span>
        </template>
      </el-table-column>
      <el-table-column label="价格" width="90" align="center">
        <template #default="scope">
          {{ scope.row.price }}
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="图书类别"
        width="110"
        align="center"
      >
        <template #default="scope">
          <el-tag>{{ scope.row.type }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="出售状态"
        width="110"
        align="center"
      >
        <template #default="scope">
          <el-tag :type="statusFilter(scope.row.status)">{{
            scope.row.status
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column  
        align="center"
        prop="created_at"
        label="发布时间"
        width="200"
      >
        <template #default="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.time }}</span>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="操作"
        align="center"
      >
        <template #default>
          <el-button type="text">查看详情</el-button>
          <el-button type="text">删除书籍</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" :total="list.length" />
  </div>
</template>

<script>
// import { getList } from '@/api/table'

export default {
  data() {
    return {
      // list: null,
      list: [
        {
          bookname: '小王子',
          bookimg:
            'https://img.zcool.cn/community/0101d256d3aeca32f875520fa93034.jpg@1280w_1l_2o_100sh.jpg',
          price: 12.11,
          bookid: 1,
          type: '小说',
          status: '在售',
          sell: '某某',
          time: '2020-11-14',
          author: '安东尼'
        },
        {
          bookname: 'JavaScript高级程序设计',
          bookimg:
            'https://img.zcool.cn/community/0101d256d3aeca32f875520fa93034.jpg@1280w_1l_2o_100sh.jpg',
          price: 22.11,
          bookid: 2,
          type: '教材',
          status: '已售出',
          sell: '一个学生',
          time: '2023-01-11',
          author: '马特·弗里斯比（Matt Frisbie）'
        }
      ],
      queryByID: '',
      listLoading: false
    }
  },
  created() {
    // this.fetchData()
  },
  methods: {
    // fetchData() {
    //   this.listLoading = true
    //   getList().then(response => {
    //     this.list = response.data.items
    //     this.listLoading = false
    //   })
    // }
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  }
}
</script>

<style scoped lang="scss">
  .query{
    display:flex;
    justify-self: start;
    margin-bottom: 20px;
    .el-input{
      margin-right:20px;
    }
  }
</style>
